import { createStoreBindings, storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../store/store'


Component({
  options: {
    styleIsolation: 'shared'
  },
  // 通过storeBindingBehavior来实现store属性自动绑定到组件中
  behaviors: [storeBindingsBehavior], 
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA, // 第1种绑定方式
      numB: (store) => store.numB, // 第2中绑定方式
      sum: 'sum', // 第3中绑定方式
      activeTabBarIndex: 'activeTabBarIndex' 
    },
    actions: {
      updateNum2: 'updateNum2', // 绑定方法
      updateActiveTabBarIndex: 'updateActiveTabBarIndex' // 与store中同名方法
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },


  /**
   * 组件的初始数据
   */
  data: {
    // 当前显示的页签索引 
    list: [
      {
        pagePath: "/pages/index/index",
        iconPath: '/common/icons/home.png',
        iconPathSelected: '/common/icons/home-fill.png',
        text: '首页',
        info: null
      },
      {
        pagePath: "/pages/message/message",
        iconPath: '/common/icons/message.png',
        iconPathSelected: '/common/icons/message-fill.png',
        text: '消息',
        info: 0
      },
      {
        pagePath: "/pages/user/uesr",
        iconPath: '/common/icons/user.png',
        iconPathSelected: '/common/icons/user.png',
        text: '我的',
        info: null
      }
    ]
  },

  
  // 数据监听器
  observers: {
    'sum': function(sumNew) {
      console.log('监听到store改变:', sumNew)
      this.setData({
        'list[1].info': sumNew 
      })
    },
    // 监听this.active，切换当前页签
    'activeTabBarIndex': function(activeNew) {
      // console.log('this.data.list:', this.data.list)
      var vm = this
      console.log('pagePath:', vm.data.list[activeNew].pagePath)
      // 注意，wx.switchTab方法中的路径一定要以斜线开头
      wx.switchTab({
        url: vm.data.list[activeNew].pagePath,
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(e) {
      // e.detail 的值为当前选中项的索引
      console.log(e.detail)
      this.updateActiveTabBarIndex(e.detail);
    }
  }
})